<template>
    <view>
		<!-- 购物车栏 begin -->
		<view class="cart-box" v-if="cart.length > 0"><!-- v-if="cart.length > 0"-->
			<view class="mark">
				<image src="https://i.yodin.com/storage/app/images/menu/cart.png" class="cart-img" @tap="openCartPopup"></image>
				<view class="tag">{{ getCartGoodsNumber }}</view>
			</view>
			<view class="price"> {{ (getCartGoodsPrice*1).toFixed(2) }}</view>
			<button type="primary" class="pay-btn" @tap="toCheckout" :disabled="disabledPay" :style="[{background:PrimaryColor}]">
				{{ disabledPay ? `差${spread}元起送` : $t('gopay') }}
			</button>
		</view>
		<!-- 购物车栏 end -->
		<!-- 购物车详情popup -->
		<u-popup :round="10" mode="bottom" @close="cartPopupVisible = false" :show="cartPopupVisible">
			<view class="cart-popup">
				<view class="top" :style="[{background:PrimaryColor}]">
					<text @tap="handleCartClear">{{$t('clear')}}</text>
				</view>
				<scroll-view class="cart-list" scroll-y>
					<view class="wrapper">
						<view class="item" v-for="(item, index) in cart" :key="index">
							<view class="left">
								<view class="name">{{ item.goods_name }}</view>
								<view class="props">{{item.sku_name}}</view>
							</view>
							<view class="price center">
								<text>{{siteInfo.money.symbol}}{{ item.price }} </text>
							</view>
							<view class="right btn-group">
								<button type="default" plain size="mini"  class="btn reduce_btn" hover-class="none"
									@tap="handleCartItemReduce(index)">
									<u-icon name="minus" labelPos="bottom" top="2"></u-icon>
								</button>
								<view class="number">{{ item.num }}</view>

							<button type="primary" class="btn add_btn" size="min" hover-class="none" :style="[{background:'#666666'}]"
								v-if="item.goods_type==1">
								<u-icon name="plus" labelPos="bottom" color="color['u-bg-color']"></u-icon>
							</button>
							<button type="primary" v-else class="btn add_btn" size="min" hover-class="none" 
								@tap="handleCartItemAdd(index)" :style="[{background:PrimaryColor}]">
								<u-icon name="plus" labelPos="bottom" color="color['u-bg-color']"></u-icon>
							</button>
								
								
							</view>
						</view>
						<view class="item" v-if="shopinfo.orderType_take == 'out' && shopinfo.packing_fee">
							<view class="left">
								<view class="name">{{$t('expressfee')}}</view>
							</view>
							<view class="price center">
								<text>{{ parseFloat(shopinfo.packing_fee) }} </text>
							</view>
							<view class="right invisible">
								<button type="default" plain size="mini" class="btn dis" hover-class="none">
									<u-icon name="minus" labelPos="bottom" top="2"></u-icon>
								</button>
								<view class="number">1</view>
								<button type="primary" class="btn dis" size="min" hover-class="none">
									<u-icon name="plus" labelPos="bottom" color="color['u-bg-color']" top="2"></u-icon>
								</button>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>
		<!-- 购物车详情popup -->
    </view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
	export default {
		props:{
			cart: {
				type: Array,
				validator: function(value) {
					return Array.isArray(value);
				}
			},
			shopinfo: {}
		},
		computed:{
		    ...mapState(['PrimaryColor','siteInfo']),
			getCartGoodsNumber() { //计算购物车总数
				if (!Array.isArray(this.cart) || this.cart.length === 0) {
					return 0;
				}
				return this.cart.reduce((acc, cur) => acc + cur.num, 0)
				
			},
			getCartGoodsPrice() {	//计算购物车总价
				if (!Array.isArray(this.cart) || this.cart.length === 0) {
					return 0;
				}
				return this.cart.reduce((acc, cur) => acc + cur.num * cur.price, 0)
			},
			disabledPay() { //是否达到起送价
				return this.shopinfo.orderType_take == 'out' && (this.getCartGoodsPrice < this.shopinfo.min_price) ? true : false
			},
			spread() { //差多少元起送
				if(this.shopinfo.orderType_take != 'out') return
				return parseFloat((this.shopinfo.min_price - this.getCartGoodsPrice).toFixed(2))
			}
		},
        data() {
        	return {
				cartPopupVisible:false,
				goodsinfo:[],
        	};
        },
    methods:{
		openCartPopup() {	//打开/关闭购物车列表popup
			this.cartPopupVisible = !this.cartPopupVisible
		},
		toCheckout(){
			// if (this.shopinfo.orderType_take == 'in'){
			// 	if (this.shopinfo.userselect_addr_id==''){
			// 		this.$emit('onSlectAddress')
			// 		return;
			// 	}
			// }

			if (!Array.isArray(this.cart) || this.cart.length === 0) {
				uni.$u.toast(this.$t('cartempty'))
				return
			}
			this.$tools.goJump('/pages/goods/cart',{},'','')

		},
		handleCartClear() {	//清空购物车
		this.cartPopupVisible=false;
		let that=this;
			uni.showModal({
				//title: 'Tips',
				content: that.$t('clscart'),
				confirmText: that.$t('clear'),//这块是确定按钮的文字
				cancelText:that.$t('continue'),//这块是取消的文字
				success: ({confirm}) =>  {
					if(confirm) {
						this.cartPopupVisible = false
						this.$emit('onSyncCart',[])
					}
				}
			})
		},
		handleCartItemAdd(index) {
			if (!Array.isArray(this.cart) || this.cart.length === 0) {return;}
			this.cart[index].num += 1
			this.$emit('onSyncCart',this.cart)
		},
		handleCartItemReduce(index) {
			if (!Array.isArray(this.cart) || this.cart.length === 0) {return;}
			if(this.cart[index].num === 1) {
				this.cart.splice(index, 1)
			} else {
				this.cart[index].num -= 1
			}
			if(!this.cart.length) {
				this.cartPopupVisible = false
			}
			this.$emit('onSyncCart',this.cart)
		},
            
    }
}
</script>

<style lang="scss" scoped>
@import '~@/pages/goods/module/shop.scss';

</style>
